
<template>
    <div>
        <el-button type="primary" @click="handleEdit('')">新增打分项</el-button>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="选项" width="180"></el-table-column>
            <el-table-column prop="name" label="选项" width="180"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="props">
                    <el-button type="primary" @click="changeBranch = true;handleEdit(props.row.id)" size="mini">修改</el-button>
                    <el-button @click="dele(props.row.id)" title="删除" type="danger" size="mini" :disabled="option.id == -1">删除</el-button>
                </template>
            </el-table-column>
            
        </el-table>

        
        <el-dialog title="新增选项" :visible.sync="dialogFormVisible">
        <el-form >
           
            <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="选项">
                <el-input v-model="option.name" placeholder="请新添一个选项"></el-input>
            </el-form-item>                     
                                  
            </el-form>           
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
        </div>
        </el-dialog> 
    </div>
</template>
<script>
import optionApi from '@/api/option'

export default {
    data(){
        return {
            list:[],
             dialogFormVisible:false,
             option:{},//实体类
        }
    },
    created(){
        this.fetchData();
    },
    methods:{
        //搜索
        fetchData(){
            optionApi.findOption().then(response => {
                this.list=response.data;
            });
        },
         handleEdit(id){
            this.dialogFormVisible=true//打开窗口
            this.id=id
            alert(id);
            //调用查询
            if(id!=''){
                optionApi.findById(id).then( response=>{
                    if(response.flag){
                        this.option=response.data;
                    }
                })                   
            }else{
                this.option = {};
            }

        },
        //添加
        save(){
            optionApi.add(this.option).then(response => {
                this.dialogFormVisible = false;
                this.$message({
                    message: response.message,
                    type: (response.flag?'success':'error')
                });                
                this.fetchData();
            })
        },
        saveOrUpdate(){
            optionApi.saveOrUpdate(this.id,this.option).then(response => {
                this.$message({
                    message: response.message,
                    type: (response.flag?'success':'error')
                });                
                this.dialogFormVisible = false;
                this.fetchData();
            });
        },
        //删除
        dele(id){
            
           this.$confirm('是否要删除本条记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                optionApi.delete(id).then(response => {
                    this.$message({
                        message: response.message,
                        type: (response.flag?'success':'error')
                    });                
                    this.fetchData();
                });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });

        },
    
    }
        
    
}
</script>